<template>
  <div class="user">
    <el-form
      ref="ruleForm"
      :rules="rules"
      label-position="left"
      label-width="100px"
      :model="ruleForm"
    >
      <el-form-item label="赛题方向：" prop="direction">
        <el-select
          v-model="ruleForm.direction"
          placeholder="请选择"
          @change="changeDirection"
        >
          <el-option
            v-for="item in direction"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="项目名称：" prop="name">
        <el-input
          v-model="ruleForm.name"
          placeholder="请输入项目名称"
        ></el-input>
      </el-form-item>
      <el-form-item class="two-line" label="是否已申请专利：" prop="isPatent">
        <el-radio v-model="ruleForm.isPatent" label="1">是</el-radio>
        <el-radio v-model="ruleForm.isPatent" label="0">否</el-radio>
      </el-form-item>
      <el-form-item class="two-line" label="是否参加线上展示：" prop="isOnline">
        <el-radio v-model="ruleForm.isOnline" label="1">是</el-radio>
        <el-radio v-model="ruleForm.isOnline" label="0">否</el-radio>
        <p class="user-title-tips">
          线上赛将直接使用企业简介、项目简介、项目展示图片进行展示，不用另做提交
        </p>
      </el-form-item>
      <el-form-item
        v-if="!showNumber"
        class="two-line"
        label="企业已有或研发中工业APP数量："
        prop="appNumber"
      >
        <el-input
          v-model="ruleForm.appNumber"
          placeholder="请输入企业已有或研发中工业APP数量"
        ></el-input>
      </el-form-item>
      <el-form-item label="项目简介：" prop="describe">
        <el-input
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 4 }"
          placeholder="请输入项目简介"
          v-model="ruleForm.describe"
        >
        </el-input>
        <p class="user-title-tips">
          简要阐述项目主要内容、技术架构、实现功能、应用情况和竞争优势等有关情况500-1000字，控制字数，具体介绍可在报名表中体现。
        </p>
      </el-form-item>
    </el-form>
    <div class="btn">
      <el-button type="primary" @click="submit()">提交</el-button>
      <el-button type="primary" @click="resetForm()">重置</el-button>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
export default {
  data() {
    return {
      ruleForm: {
        direction: "",
        name: "",
        isPatent: "",
        isOnline: "",
        appNumber: "",
        describe: "",
      },
      rules: {
        direction: [
          { required: true, message: "请选择赛题方向", trigger: "blur" },
        ],
        name: [{ required: true, message: "请输入项目名称", trigger: "blur" }],
        isPatent: [{ required: true }],
        isOnline: [{ required: true }],
        describe: [
          { required: true, message: "请填写项目简介", trigger: "blur" },
        ],
      },
      showNumber: false,
    };
  },
  mounted() {
    this.getDirection();
    this.init();
  },
  methods: {
    ...mapActions(["getDirection", "projectSave", "getUserInfo", "uploadFile"]),
    init() {
      this.getUserInfo().then((res) => {
        this.ruleForm.direction = this.userProjectInfo.direction_id;
        this.ruleForm.appNumber = this.userProjectInfo.app_count;
        this.ruleForm.name = this.userProjectInfo.title;
        this.ruleForm.isPatent = this.userProjectInfo.is_patent + "";
        this.ruleForm.isOnline = this.userProjectInfo.is_online_events + "";
        this.ruleForm.describe = this.userProjectInfo.content;
        this.changeDirection(this.userProjectInfo.direction_id);
      });
    },
    submit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let data = {
            direction_id: this.ruleForm.direction,
            app_count: this.ruleForm.appNumber,
            title: this.ruleForm.name,
            is_patent: this.ruleForm.isPatent,
            is_online_events: this.ruleForm.isOnline,
            content: this.ruleForm.describe,
          };
          this.projectSave(data).then((res) => {
            this.$message({
              message: "保存成功",
              type: "success",
            });
            this.getUserInfo();
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    changeDirection(id) {
      this.direction.forEach((item) => {
        if (item.id == id) {
          if (item.type == 1) {
            this.showNumber = false;
          } else {
            this.showNumber = true;
          }
        }
      });
    },
    resetForm() {
      this.$refs.ruleForm.resetFields();
    },
  },
  computed: {
    ...mapGetters(["direction", "userProjectInfo"]),
  },
};
</script>

<style scoped>
.user {
  width: 100%;
  background: #fff;
  box-sizing: border-box;
  padding: 0 0 20px 0;
}
.user >>> .el-input__inner {
  border: none;
  width: 100%;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #999999;
  padding: 0;
}
.user >>> .el-select {
  width: 100%;
}
.user >>> .el-form-item {
  width: 92%;
  border-bottom: 1px solid #e6e6e6;
  margin: 8px 15px 0;
  padding-bottom: 10px;
}
.team-title {
  height: 40px;
  line-height: 40px;
  box-sizing: border-box;
  padding: 0 15px;
  color: #333;
  font-size: 15px;
  font-weight: bold;
  background: #f5f5f5;
}
.line {
  width: 100%;
  height: 15px;
  background: #f5f5f5;
}
.btn {
  padding: 15px;
  display: flex;
  justify-content: space-between;
}
.btn >>> .el-button {
  width: 48%;
  height: 45px;
  font-size: 15px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #fffdfd;
  border-radius: 4px;
  letter-spacing: 3px;
  border: none;
  margin-top: 28px;
}
.btn .el-button:nth-of-type(1) {
  background: #0e93e4;
}
.btn .el-button:nth-of-type(2) {
  background: #e12727;
}
.two-line>>> .el-form-item__label {
  line-height: 20px;
}
.user-title-tips{
  font-size: 10px;
  color: #aaa;
}
</style>